<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>视频通话</title>

	<style>
		.full {
			position: absolute;
			width: 100vw;
			height: 100vh;
		}

		.small {
			position: absolute;
			z-index: 1;
			right: 1vw;
			top: 1vh;
			width: 20vw;
			height: 20vh;
		}

		body {
			padding: 0;
		}
	</style>
</head>

<body>

	<div id="vue-root" style="position: relative;">
		<div v-for="uid in uids" :key="uid" :id="'player-'+uid" class="full"></div>
		<div id="self" :class="uids.length?'small':'full'"></div>
	</div>

	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.10.0.js"></script>
	<script src="/js/common.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				uids: [],
			}
		});

		var channel = new URL(location.href).searchParams.get('channel');

		axios.post('/api/call/add/' + channel).then(function (res) {
			var client = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' });
			var o = res.data;
			if (!o.appid) {
				alert('通话结束');
				history.back();
				return;
			}

			client.join(o.appid, channel, o.token).then(function (uid) {
				AgoraRTC.createMicrophoneAudioTrack().then(function (audioTrack) {
					AgoraRTC.createCameraVideoTrack().then(function (videoTrack) {
						videoTrack.play('self');
						client.publish([videoTrack, audioTrack]);
					});
				});
			}).catch(alert);

			client.on('user-published', function (user, mediaType) {
				app.uids.push(user.uid);
				client.subscribe(user, mediaType).then(function () {
					if (mediaType === 'video')
						Vue.nextTick(function () {
							user.videoTrack.play('player-' + user.uid);
						});
					if (mediaType === 'audio')
						user.audioTrack.play();
				})
			});
		});
	</script>

</body>

</html>